<template>
  <div class="experimentList">
    <div class="table">
      <div class="head" style="margin-top:-10px">
        <el-button class="btn_back" type="primary" plain icon="el-icon-d-arrow-left" @click="back">返回</el-button>
        <span class="title">华山论剑</span>
        <el-button icon="el-icon-refresh" class="refreshBtn" size="small" type="primary" round
          v-debounce="getTableData">刷新</el-button>
      </div>
      <div class="content">
        <el-table v-loading="tableLoading" :data="tableData" border fit stripe highlight-current-row width="100%">
          <template slot="empty">
            <span>实验数据为空</span>
          </template>
          <el-table-column prop="id" label="题目id" width="90" align="center">
          </el-table-column>
          <el-table-column prop="title" align="center" label="题干" show-overflow-tooltip />
          <!--el-table-column align="center" prop="level" label="难度" width="80px">
          </el-table-column-->
          <el-table-column
        sortable
        align="center"
        prop="level"
        label="难度"
        width="100px"
      >
        <template v-slot="{ row }">
          {{ levelChange(row.level) }}
        </template>
      </el-table-column>
          <el-table-column prop="tags" align="center" label="知识点" width="200">
        <template v-slot="{ row }">
          <el-tag
            v-for="item in row.tags"
            :key="item.index"
            >{{ item.name }}</el-tag
          >
        </template>
      </el-table-column>
          <el-table-column label="操作" align="center" width="440">
            <template slot-scope="{ row }">
              <el-button
            class="btn_success"
            icon="el-icon-s-platform"
            size="mini"
            @click="textQuestion(row)"
            >测试</el-button
          >
          <el-button
            class="btn_primary"
            size="mini"
            icon="el-icon-view"
            @click="showQuestion(row)"
            >预览</el-button
          >
              
            </template>
          </el-table-column>
        </el-table>
        <el-pagination v-show="total > pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="currentPage" :page-sizes="[5, 10, 20, 30, 50]" :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>

        <el-dialog
      :visible.sync="questionShow.dialog"
      v-if="questionShow.question"
      style="width: 100%;height: 100%"
    >
      <div>
        <program-detail :question="questionShow.question"></program-detail>
      </div>
    </el-dialog>

      </div>

    </div>
  </div>
</template>

<script>
  import {
    getPGQuestionByDifficulty
  } from "@/api/question.js";
  import programDetail from "@/components/programDetail.vue";
  export default {
    name: "experimentCompetion",
    components: {
    programDetail,
   
  },
    data() {
      return {

        difficulty: this.$route.query.difficulty,
        currentPage: 1,
        pageSize: 10,

        userId: null,
        total: 10,
        tableLoading: false,
        //tableData: [],
        /*tableData: [{
            id: 1,
            userId: 1,
            title: 1,
            level: "容易",
            finish: "已完成"
          },
          {
            id: 2,
            userId: 2,
            title: 2,
            level: "容易",
            finish: "已完成"
          },
          {
            id: 3,
            userId: 3,
            title: 3,
            level: "容易",
            finish: "未完成"
          }
        ],*/
        tableData: [],
        questionShow: {
        dialog: false,
        question: null
      }
      };
    },
    created() {
      this.userId = JSON.parse(localStorage.getItem("user")).userId;
      this.getTableData();
    },
    computed: {
    levelChange() {
      let levels = ["easy", "medium", "hard", "insuperable", "hell"];
      return val => {
        return levels[val];
      };
    }
  },
    /*computed: {
      finishChange() {
        let finishs = ["未完成", "已完成"];
        return val => {
          return finishs[val];
        };
      }
    },*/
   // activated() {

      //this.getTableData();


   // },
    methods: {
      //返回
      back() {
        this.$router.go(-1);
      },
      getTableData() {
        //if (this.$route.query.difficulty) {
        //this.tableLoading = true;
        //this.queryParam.difficulty = this.$route.query.difficulty;
        let obj = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        difficulty: this.difficulty,
      };
        getPGQuestionByDifficulty(obj).then((res) => {
          this.tableData = res.data;
          this.currentPage = res.pageNum;
          this.pageSize = res.pageSize;
          this.total = res.total;
        }).catch(() => {
          this.$message.error("无法获取题目信息！");
        }).finally(() => {
          this.formLoading = false;
        })

        //}
      },
      handleSizeChange(size) {
        this.pageSize = size;
        this.getTableData();
      },
      handleCurrentChange(page) {
        this.currentPage = page;
        this.getTableData();
      },
      showQuestion(row) {
      this.questionShow.dialog = true;
      this.questionShow.question = row;
    },
    textQuestion(row) {
      row.examAndExperimentId = 0;      
      this.$router.push({
        name: "experimentModule/experimentDetail",
        params: { data: row }
      });
    },

    }
  };
</script>
<style scoped>
  .title {
    font-size: 20px;
    color: #409eff;
    font-weight: bold;
  }

  .el-table {
    margin-top: 20px;
  }

  .head {
    position: relative;
  }

  .sortBtn {
    position: absolute;
    right: 250px;
  }

  .getBtn {
    position: absolute;
    right: 110px;
  }

  .refreshBtn {
    position: absolute;
    right: 10px;
  }

  .el-tag.el-tag--light.close {
    background-color: #fef0f0;
    border-color: #f56c6c;
    color: #f56c6c;
  }

  .el-tag.el-tag--light.open {
    border-color: #67c23a;
    background-color: #f0f9eb;
    color: #67c23a;
  }

  .el-select {
    display: flex;
    justify-content: flex-start;
    width: 150px;
  }

  .btn_back {
    position: absolute;
    left: 10px;

  }
</style>
